<template>
  <div style="display: flex; height: 100%; gap: 10px">
    <div style="width: 740px; display: flex; gap: 10px; flex-direction: column">
      <div style="display: flex; gap: 10px; height: 350px">
        <content-area title="路径规划场景" style="flex: 1">
          <clickable-list
            :list-items="data.map((item:any) => item.name)"
            @item-clicked="changeDataIndex"
          ></clickable-list>
        </content-area>
        <content-area title="场景预览">
          <el-image
            :src="data[dataIndex].photo"
            :preview-src-list="[data[dataIndex].photo]"
            style="height: 280px; width: 500px"
          />
        </content-area>
      </div>
      <content-area title="规划过程展示" style="flex: 1">
        <video controls :src="data[dataIndex].video" width="720"></video>
      </content-area>
    </div>
    <div style="flex: 1; display: flex; flex-direction: column; gap: 10px">
      <content-area title="规划结果数据" style="flex: 1;overflow-y: scroll">
        <selectable-list
          :list-items="results.map((item:any) => item.name)"
          @item-change="selectedResultsChange"
        ></selectable-list>
      </content-area>
      <content-area title="评价指标" style="flex: 1">
        <div class="index-name">规划时间：</div>
        <div class="index-value">{{duration}}s</div>
        <div class="index-name">路径长度：</div>
        <div class="index-value">{{len}}m</div>
        <div class="index-name">平均曲率：</div>
        <div class="index-value">{{mean}}</div>
        <div class="index-name">曲率方差：</div>
        <div class="index-value">{{variance}}</div>
      </content-area>
    </div>
    <div style="display: flex; flex-direction: column; gap: 10px">
      <content-area title="3d路径" style="flex: 1">
        <traj-graph
            :chart-data="selectedResults.map((item:number) => results[item])"
            style="width: 900px; height: 350px; margin: auto"
        ></traj-graph>
      </content-area>
      <content-area title="路径曲率" style="flex: 1">
        <cur-graph
            :chart-data="selectedResults.map((item:number) => results[item])"
            style="width: 900px; height: 350px; margin: auto"
        ></cur-graph>
      </content-area>
    </div>

  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, computed } from "vue";

onMounted(() => {
  fetchData();
  fetchResults();
});

const data = ref([{ name: "", video: "", photo: "" }]);
const dataIndex = ref(0);
const changeDataIndex = (index: number) => {
  dataIndex.value = index;
};
const fetchData = async () => {
  try {
    const res = await fetch("http://localhost:5000/traj/data");
    data.value = await res.json();
  } catch (error) {
    console.error("请求出错：", error);
  }
};

const results = ref([
  {
    name: "",
    points: [],
    len: 0,
    duration: 0,
    curvature: [],
    meanCurvature: 0,
    varianceCurvature: 0,
  },
]);
const selectedResults = ref([0]);
const len = computed(() => {
  let sum = 0;
  selectedResults.value.forEach((i) => {
    sum += results.value[i].len;
  });
  return (sum / selectedResults.value.length).toFixed(2);
});
const duration = computed(() => {
  let sum = 0;
  selectedResults.value.forEach((i) => {
    sum += results.value[i].duration;
  });
  return (sum / selectedResults.value.length).toFixed(2);
});
const mean = computed(() => {
  let sum = 0;
  selectedResults.value.forEach((i) => {
    sum += results.value[i].meanCurvature;
  });
  return (sum / selectedResults.value.length).toFixed(2);
});
const variance = computed(() => {
  let sum = 0;
  selectedResults.value.forEach((i) => {
    sum += results.value[i].varianceCurvature;
  });
  return (sum / selectedResults.value.length).toFixed(2);
});
const selectedResultsChange = (nums: number[]) => {
  selectedResults.value = nums;
};
const fetchResults = async () => {
  try {
    const res = await fetch("http://localhost:5000/traj/results");
    const names = await res.json();
    results.value = await Promise.all(
      names.map((item: { name: string }) =>
        fetch("http://localhost:5000/traj/results/" + item.name).then((r) => r.json())
      )
    );
  } catch (error) {
    console.error("请求出错：", error);
  }
};
</script>

<style scoped>
.index-name {
  font-size: 20px;
}
.index-value {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #39d1e0;
}
</style>
